<template>
  <div>
    <el-button
      plain
      type="primary"
      size="default"
      @click="handleAssignUser"
    >
      {{ $t("form.public.assignUser") }}
    </el-button>
    <el-button
      plain
      size="default"
      type="success"
      @click="handleAssignDept"
    >
      {{ $t("form.public.assignDept") }}
    </el-button>
    <el-button
      plain
      size="default"
      type="info"
      @click="handleAssignRole"
    >
      {{ $t("form.public.assignRole") }}
    </el-button>
    <user-choose-table
      ref="userChooseTableRef"
      :no-record="true"
      @submit="handleSubmitAssignUser"
    />
    <role-choose-table
      ref="roleChooseTableRef"
      @submit="handleSubmitAssignRole"
    />
    <dept-choose-tree
      ref="deptChooseTreeRef"
      @submit="handleSubmitAssignDept"
    />
  </div>
</template>
<script setup lang="ts">
import { loadAsyncComponent } from "@/utils/asyncComponent";

const UserChooseTable = loadAsyncComponent(() => import("@/views/system/user/chooseTable.vue"));
const RoleChooseTable = loadAsyncComponent(() => import("@/views/system/role/chooseTable.vue"));
const DeptChooseTree = loadAsyncComponent(() => import("@/views/system/dept/chooseTree.vue"));

import { ref } from "vue";
import { assignTodo } from "@/api/project/todo";
import { i18n } from "@/i18n";
import { MessageUtil } from "@/utils/messageUtil";

const props = defineProps({
  formKey: {
    type: String,
    required: true
  },
  taskId: {
    type: Number,
    required: false,
    default: 0
  }
});

const userChooseTableRef = ref<InstanceType<typeof UserChooseTable> | null>(null);
const roleChooseTableRef = ref<InstanceType<typeof RoleChooseTable> | null>(null);
const deptChooseTreeRef = ref<InstanceType<typeof DeptChooseTree> | null>(null);

const handleAssignUser = () => {
  userChooseTableRef.value.showDialog([]);
};

const handleAssignDept = () => {
  deptChooseTreeRef.value.showDialog([]);
};

const handleAssignRole = () => {
  roleChooseTableRef.value.showDialog([]);
};

const emit = defineEmits(["refresh"]);

const handleSubmitAssignUser = (val: any) => {
  const userIdList = val.map((item: any) => item.id);
  assignTodo({
    formKey: props.formKey,
    userIdList: userIdList,
    taskId: props.taskId
  }).then(() => {
    MessageUtil.success(i18n.global.t("formI18n.all.success"));
    emit("refresh");
  });
};
const handleSubmitAssignDept = (val: any) => {
  const deptIdList = val.map((item: any) => item.id);
  assignTodo({
    formKey: props.formKey,
    deptIdList: deptIdList,
    taskId: props.taskId
  }).then(() => {
    MessageUtil.success(i18n.global.t("formI18n.all.success"));
    emit("refresh");
  });
};

const handleSubmitAssignRole = (val: any[]) => {
  const roleIdList = val.map(item => item.id);
  assignTodo({
    formKey: props.formKey,
    roleIdList: roleIdList,
    taskId: props.taskId
  }).then(() => {
    MessageUtil.success(i18n.global.t("formI18n.all.success"));
    emit("refresh");
  });
};
</script>

<style scoped lang="scss"></style>
